@import '~styles/settings.scss';
$black-tabs: #404040;
$left-panel-width: calc((#{$max-width} * 0.7) + ((100vw - #{$max-width}) / 2));
$right-panel-width: calc((#{$max-width} * 0.3) + ((100vw - #{$max-width}) / 2));

.l-dashboards-page {
  border-bottom: solid 1px $border;
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $screen-m) {
    flex-direction: row;
  }

  .content-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;

    @media screen and (min-width: $screen-m) {
      width: $left-panel-width;
    }

    .dashboard-widgets,
    .pending-message {
      @media screen and (min-width: $screen-xl) {
        padding-left: calc(100% - (#{$max-width} * 0.7) + #{$desktop-gutter});
      }
    }
  }

  .mobile-map {
    height: 100%;
  }

  .map-panel {
    height: calc(100% - 56px);
    position: fixed;
    right: -100%;
    width: 100%;
    top: rem(56px);
    transition: right 0.5s linear;
    background-color: #b3e2ff;
    z-index: 1001;

    .map-container {
      height: 100%;
    }

    @media screen and (min-width: $screen-m) {
      margin-right: 0;
      position: unset;
      z-index: 200;
      margin-top: -56px;
      width: $right-panel-width;

      .map-container {
        height: 100vh;
      }
    }

    &.-open-mobile {
      right: 0;
      z-index: 1;

      .map-container {
        height: calc(100vh - 56px);
      }
    }
  }

  .map-controls {
    display: block;
    position: absolute;
    top: rem(15px);
    right: rem(15px);
    z-index: 999;
  }

  .close-map-button {
    position: fixed;
    top: rem(75px);
    right: rem(15px);
    width: rem(60px);
    height: rem(60px);
    min-width: rem(60px);
    min-height: rem(60px);
    background-color: $white;
    z-index: 1002;
    cursor: pointer;
    fill: $white;
    border-radius: 50%;

    @media screen and (min-width: $screen-m) {
      display: none;
      z-index: 220;
    }

    &:focus {
      outline: none;
    }
  }

  .header,
  .nav {
    @media screen and (min-width: $screen-xl) {
      padding-left: calc(100% - (#{$max-width} * 0.7));
    }
  }
}
